<template>
  <div class="OnePiece" :style="active=='1'?'background: #401117':'background: #2A0A44'">
    <navigation image_='0' title="抢闪耀新星" :show="show_zi" v-on:show="zidingyi($event)" />
    <div class="top_title" :class="active=='1'?'top_one':'top_two'">

      <div class="shine_icon">
        <img v-if="active=='1'" src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/star_title.png"
          alt="">
        <img v-else src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_title.png" alt="">
      </div>

      <div class="stage_icon">
        <img v-if="active=='1'" class="back_stage"
          src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_stage_img.png" alt="">
        <img v-else class="back_stage"
          src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_stage_img.png" alt="">

        <img class="back_icon"
          src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_back_btn.png" alt=""
          @click="back_app">
        <img class="SayHello"
          src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_help_icon.png" alt=""
          @click="ejectRule">

        <!-- 关注 -->
        <div class="header_pic">
          <img v-if="active=='1'" class="portrait_kuang" src="../../public/img/other/level_frame2.png"
            @click="openProfile(rankfirst.userId)" alt="">
          <img v-else class="portrait_kuang" src="../../public/img/other/charm_frame2.png" alt=""
            @click="openProfile(rankfirst.userId)">
          <img class="headPic_" v-if="rankfirst.headPic" :src="rankfirst.headPic" alt="">
          <div v-else class="headPic_2">
            <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/zuowei_img.png" alt="">
          </div>
          <div class="follow_icon" v-if="list.isFollow=='0' && rankfirst.userId" @click="Follow(rankfirst.userId)">
            +关注
          </div>
        </div>
        <!-- 进入房间 -->
        <div v-if="rankfirst.room_id" class="EnterRoom" @click="getintoRoom(rankfirst.room_id.toString())">
          <img src="http://img.xunyinjiaoyou.com/static/xiaochengxu/shouye/index_shengbo.png" alt="波浪">
          <span>跟随进房</span>
        </div>
        <!-- 名字 -->
        <div class="user_list" v-if="rankfirst.userId">
          <span v-if="rankfirst.nickname">{{splice_(rankfirst.nickname)}}</span>

          <img class="sex_iocn" v-if="rankfirst.sex =='1'" src="../../public/img/other/boy_lab.png" alt="">
          <img class="sex_iocn" v-else src="../../public/img/other/girl_lab.png" alt="">

          <img class="dengji_iocn" v-if="rankfirst.level"
            :src="getImgUrl2(active=='1'?rankfirst.level:rankfirst.trainer_level)" alt="">
        </div>

      </div>
      <!-- 财富魅力切换 -->
      <div class="tab_cur">
        <div @click="tab_active(1)">
          <img v-if="active=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_btn_select.png" alt="" />
          <span :class="active=='1'?'span_tab':''">财富新星</span>
        </div>
        <div @click="tab_active(2)">
          <img v-if="active=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_btn_select.png" alt="" />
          <span :class="active=='2'?'span_tab':''">魅力新星</span>
        </div>
      </div>
      <!-- 倒计时 -->
      <div class="countDown">
        <div class="left_FieldNumber" @click="Switchingtimes(1)">
          <img v-if="active=='1' && type=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_chang_btn_select.png" alt="" />
          <img v-if="active=='1' && type=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_chang_btn_nor.png" alt="" />

          <img v-if="active=='2' && type=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_chang_btn_select.png"
            alt="" />
          <img v-if="active=='2' && type=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_chang_btn_nor.png" alt="" />

          <span v-if="list.activityInfo"
            :style="type=='1'?'color:rgba(255, 255, 255, 1)':'color:rgba(246, 204, 3, 0.45)'">第{{list.activityInfo.number}}场</span>
        </div>

        <div class="center_iocn_time">
          <img v-if="active=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_time_img.png" alt="">
          <img v-else src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_time_img.png"
            alt="">
          <span>本场结束倒计时</span>
          <span v-if="list.activityInfo.status==0">{{endTime}}</span>
          <span v-if="list.activityInfo.status==1">已结束</span>
          <span v-if="list.activityInfo.status==2">未开始</span>
        </div>

        <div class="right_FieldNumber" @click="Switchingtimes(2)">
          <img v-if="active=='1' && type=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_jilv_btn_select.png" alt="" />
          <img v-if="active=='1' && type=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_jilv_btn_nor.png" alt="" />

          <img v-if="active=='2' && type=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_jilv_btn_select.png" alt="" />
          <img v-if="active=='2' && type=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_jilv_btn_nor.png" alt="" />

          <span :style="type=='2'?'color:rgba(255, 255, 255, 1)':'color:rgba(246, 204, 3, 0.45)'">历史记录</span>
        </div>
      </div>
    </div>
    <div class="ranking">
      <div class="left_diamond">
        <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/square_img.png" alt="">
      </div>
      <div class="right_diamond">
        <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/square_img.png" alt="">
      </div>

      <div v-if="type=='1' && list.rankList"
        :class="list.rankList.length<3?'_height50vh center_content':'center_content' "
        :style="active=='1'?'background: linear-gradient(0deg, #2F0D13 0%, #6C4027 100%);':'background: linear-gradient(0deg, #56028E 0%, #9E02DF 100%);'">
        <div :class="active=='1'?'back_bag1 speedProgress':'back_bag2 speedProgress'">
          <div class="top_cf">
            <span>本场{{active==1?'财富':'魅力'}}值:{{list.activityInfo.needCharm}}</span>
            <span>距截榜还差:{{list.activityInfo.currentCharm>list.activityInfo.needCharm?'0':list.activityInfo.needCharm-list.activityInfo.currentCharm}}</span>
          </div>
          <div class="Progress">
            <div v-if="list.activityInfo.needCharm"
              :style="'width:'+Progress_(list.activityInfo.needCharm,list.activityInfo.currentCharm)+'%'"></div>
            <img :style="'left:'+ (Progress_(list.activityInfo.needCharm,list.activityInfo.currentCharm)-8) +'%'"
              src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/Progress.png" alt="">
          </div>
        </div>
        <template v-if="list.rankList.length">
          <div v-for="item,index in list.rankList" :key="index" class="rank_pangming">
            <div class="rank_name">
              <img v-if="index == 0"
                src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_rank2_img.png" alt="">
              <img v-else-if="index == 1"
                src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_rank3_img.png" alt="">
              <span v-else>{{index+2}}</span>
            </div>
            <div :class="'header_img border_back'+item.rank" @click="openProfile(item.userId)">
              <img :src="item.headPic" alt="">
            </div>
            <div class="user_miaoshu">
              <span>{{item.nickname}}</span>
              <div>
                <img v-if="item.sex=='1'" src="../../public/img/other/boy_lab.png" alt="">
                <img v-else src="../../public/img/other/girl_lab.png" alt="">
                <img v-if="item.level" :src="getImgUrl(item.level)" alt="">
              </div>
            </div>
            <div class="pang_rangk">
              <span>{{item.charm}}</span>
              <div v-if="item.room_id" @click="getintoRoom(item.room_id.toString())">
                <img src="http://img.xunyinjiaoyou.com/static/xiaochengxu/shouye/index_shengbo.png" alt="波浪">
              </div>
            </div>
          </div>
        </template>
        <div class="nopress" v-else>
          无人上榜,快冲呀~~
        </div>
      </div>

      <!-- 历史记录 -->
      <div v-if="type=='2'" :class="history_.length<3?'_height50vh center_content':'center_content' "
        :style="active=='1'?'background: linear-gradient(0deg, #2F0D13 0%, #6C4027 100%);':'background: linear-gradient(0deg, #56028E 0%, #9E02DF 100%);'">
        <template v-if="history_.length">
          <div v-for="item,index in history_" :key="index" :class="active=='1'?'ba_active1':'ba_active2'">
            <div class="top_changshu">
              <img v-if="active=='1'"
                src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_chang_img.png" alt="">
              <img v-else src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_chang_img.png"
                alt="">
              <span>第{{item.number}}场</span>
            </div>
            <div class="center_name">
              <div class="pic_avac">
                <div class="zuoji_header">
                  <img v-if="item.nickname" :src="item.head_pic" alt="">
                  <img v-else src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/shafa_icon.png" alt="">
                </div>
                <div v-if="item.nickname" class="name_list">
                  <span>{{item.nickname}}</span>
                  <div class="pic_header_img">
                    <img v-if="item.sex" src="../../public/img/other/boy_lab.png" alt="">
                    <img v-else src="../../public/img/other/girl_lab.png" alt="">
                    <!-- <img :src="getImgUrl2(active=='1'?item.level:item.charm_level)" alt=""> -->
                    <img v-if="active=='1'" :src="getImgUrl1(item.level)" alt="">
                    <img v-else :src="getImgUrl1(item.charm_level)" alt="">
                  </div>
                </div>
                <div v-else class="name_list">
                  <span style="line-height:10.8vw">
                    未达标
                  </span>
                </div>
              </div>
              <div class="icon_cin">
                <img v-if="item.nickname &&  active=='1'"
                  src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/icon_image.png" alt="">
                <img v-if="item.nickname &&  active=='2'"
                  src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/icon_image.png" alt="">
              </div>
            </div>
            <div class="bottom_cfzhi">
              <span>消耗{{active==1?'财富':'魅力'}}值: </span>
              <span> {{item.charm}}</span>
            </div>
          </div>
        </template>
        <div class="nopress" v-else>
          无人上榜,快冲呀~~
        </div>
      </div>
    </div>

    <div class="rank_user_pm" v-if="type=='1'"
      :style="active=='1'?'background: linear-gradient(0deg, #FF6749 1%, #FA738F 98%);':'background: linear-gradient(0deg, #5C0295 0%, #B113FA 100%);'">
      <div class="center_user">

        <div class="heade_pic">
          <img v-if="list.myRankInfo" :src="list.myRankInfo.headPic" alt="">
        </div>

        <div class="list_userlianx">
          <span v-if="list.myRankInfo">{{list.myRankInfo.nickname}}</span>
          <span v-if="list.myRankInfo">本轮{{active=='1'?'财富':'魅力'}}:{{list.myRankInfo.myCharm}}</span>
        </div>

        <div class="pm_list">
          <span v-if="list.myRankInfo">{{list.myRankInfo.rankDesc}}</span>
        </div>

      </div>
    </div>
    <van-popup v-model="show" round>
      <div class="rule_model">
        <div class="top_title_rule">活动规则</div>
        <div class="rule_explain">
          <span>1.每天19:00—23:30限时开放,每天最多产生3个财富新星和魅力新星.</span>
          <span>2.每场最低财富值或魅力值不低于5w.</span>
          <span>3.财富值和魅力值仅计算“日常礼物”,其他礼物不计算.</span>
          <span>4.获得奖励每场结束后实时发放,请注意查收.</span>
        </div>
        <div class="top_title_rule">活动奖励</div>
        <div class="FortuneStar">
          <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli1.png" alt="">
          <span>财富新星奖励</span>
          <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli2.png" alt="">
        </div>
        <div class="wealth_gift">
          <div v-for="item,index in wealth" :key="index">
            <div class="gift_box"><img :src="item.icon" alt=""></div>
            <div class="gift_text">
              <span>{{item.name}}</span>
              <span>{{item.prescription}}</span>
            </div>
          </div>
        </div>
        <div class="FortuneStar">
          <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli1.png" alt="">
          <span>魅力新星奖励</span>
          <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli2.png" alt="">
        </div>
        <div class="wealth_gift">
          <div v-for="item,index in CharmReward" :key="index">
            <div class="gift_box"><img :src="item.icon" alt=""></div>
            <div class="gift_text">
              <span>{{item.name}}</span>
              <span>{{item.prescription}}</span>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast
  } from "vant";
  import navigation from '../../components/navigation'
  export default {
    data() {
      return {
        wealth: [{
          icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/icon_image.png",
          name: "财富新星勋章",
          prescription: '永久'
        }, {
          icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_frame.png",
          name: "财富新星头像框",
          prescription: '7天'
        }, {
          icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/efficon.png",
          name: "财富新星进场",
          prescription: '7天'
        }],
        CharmReward: [{
          icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/icon_image.png",
          name: "魅力新星勋章",
          prescription: '永久'
        }, {
          icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_frame.png",
          name: "魅力新星头像框",
          prescription: '7天'
        }, {
          icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/car.png",
          name: "魅力新星进场",
          prescription: '7天'
        }],
        active: 1, //1财富新星2魅力新星
        type: 1, //1场数2历史记录

        list: {
          activityInfo: {
            status: 0
          },
          myRankInfo: {},
          rankList: [],
        },
        rankfirst: {},
        show: false,
        endTime: '',
        history_: [],
        show_zi: false,
      };
    },
    components: {
      navigation
    },
    created() {
      this.levepage(this.active);
      let url = location.href;
      if (this.active = url.split("?")[1]) {
        this.active = url.split("?")[1].split("=")[1];
      } else {
        this.active = '1'
      }
    },
    methods: {
      zidingyi(msg) {
        this.show_zi = msg
      },
      back_app() {
        if (window.isiOS) {
          console.log("iOS返回事件");
          window.webkit.messageHandlers.backAction.postMessage({});
        } else {
          console.log("安卓返回事件");
          app.backAction();
        }
      },
      openProfile(user) {
        console.log(user);
        if (user) {
          if (window.isiOS) {
            window.webkit.messageHandlers.openProfile.postMessage({
              userId: user,
            });
          } else {
            app.openProfile(user);
          }
        } else {
          Toast('暂无人上榜')
        }

      },
      //进入房间
      getintoRoom(roomId) {
        console.log(roomId);
        if (window.isiOS) {
          window.webkit.messageHandlers.getIntoRoom.postMessage({
            roomId: roomId,
          });
        } else {
          app.getIntoRoom(roomId);
        }
      },
      // 定时器
      minReturn(time_) {
        let that = this;
        let time = time_
        clearInterval(that.time_t)
        that.time_t = setInterval(() => {
          time--
          // this.formatSeconds(time)
          that.endTime = that.formatSeconds(time)
          if (time <= 0) {
            clearInterval(that.time_t)
          }
        }, 1000)
      },
      // 秒转时分秒，求模很重要，数字的下舍入
      formatSeconds(time) {
        if (time <= 0) {
          clearInterval(this.time_t)
          this.type == '1' ? this.levepage(this.active) : this.hourStarHistory(this.active);
        } else {
          let min = Math.floor(time % 3600)
          let val = this.formatBit(Math.floor(time / 3600)) + ':' + this.formatBit(Math.floor(min / 60)) + ':' + this
            .formatBit(time % 60) + ''
          return val
        }
      },
      formatBit(val) {
        val = +val
        return val > 9 ? val : '0' + val
      },
      Progress_(need, my_Charm) {
        if (my_Charm > need) {
          return 100
        } else {
          let num = (my_Charm / need) * 100;
          num.toFixed(2)
          return num
        }

      },
      getImgUrl(img) {
        let imgurl = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level3/level" + img + ".png"
        return imgurl;

      },
      getImgUrl1(img) {
        if (this.active == '1') {
          let imgurl = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level3/" + img + ".png"
          return imgurl;
        } else {
          let imgurl = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/charm3/" + img + ".png"
          return imgurl;
        }
      },
      getImgUrl2(img) {
        if (this.active == '1') {
          let imgurl = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level3/level" + img + ".png"
          return imgurl;
        } else {
          let imgurl = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/charm3/charm" + img + ".png"
          return imgurl;
        }
      },
      ejectRule() {
        this.show = true;
      },
      tab_active(active) {
        this.active = active
        if (this.type == '1') {
          this.levepage(this.active);
        } else {
          this.hourStarHistory(this.active)
        }
      },
      Switchingtimes(type) {
        this.type = type
        if (type == '1') {
          this.levepage(this.active);
        } else {
          this.hourStarHistory(this.active)
        }
      },
      splice_(value) {
        let slice2 = "";
        if (value.length > 5) {
          slice2 = value
          slice2 = slice2.slice(0, 6)
          return slice2 + '...';
        } else {
          return value
        }
      },
      // 财富魅力
      levepage(active) {
        let arys = {
          type: active,
        }; //参数
        let url = "/activity/hourStar";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.list = res.data.result;
            if (res.data.result.rankList.length) {
              var rankfirst = res.data.result.rankList.shift();
              this.rankfirst = rankfirst;
            }
            this.minReturn(Math.abs(res.data.result.activityInfo.countdown))
          } else {
            this.list = {}
            Toast(res.data.text);
          }
        });
      },
      // 历史记录
      hourStarHistory(active) {
        let arys = {
          type: active,
        }; //参数
        let url = "/activity/hourStarHistory";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.history_ = res.data.result;
          } else {
            Toast(res.data.text);
          }
        });
      },
      Follow(followId) {
        let arys = {
          followId: followId,
        }; //参数
        let url = "user/followInsert";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.list.isFollow = '1';
          }
          Toast(res.data.text);
        });
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .pxToVW (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .OnePiece {
    overflow: hidden;
    width: 100vw;
  }

  .top_title {
    width: 100vw;
    height: 130vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .ranking {
    .pxToVW(770);
    margin: @auto;
    .pxToVW(20, margin-bottom);
    .pxToVW(20, padding-bottom);
    border: 1px solid #FFE063;
    position: relative;
    border-radius: 0 0 6px 6px;


    .left_diamond {
      position: absolute;
      left: -8px;
      top: -10px;
      .pxToVW(34);
      .pxToVW(34, height);
      z-index: 10;

      img {
        width: 100%;
      }
    }

    .right_diamond {
      position: absolute;
      right: -8px;
      top: -10px;
      .pxToVW(34);
      .pxToVW(34, height);
      z-index: 10;

      img {
        width: 100%;
      }
    }

    ._height50vh {
      height: 50vh
    }

    .center_content {
      .pxToVW(730);
      .pxToVW(30, border-radius);
      .pxToVW(30, margin-bottom);
      margin: @auto;
      border: 1px solid #FFE063;

      .back_bag1 {
        border: 2px solid;
        border-image: linear-gradient(45deg, #FFE99E, #F9B3FF) 5 5;
        clip-path: inset(0 round 4px);
        background: #FE6B5F;

      }

      .back_bag2 {
        background: #66048E;
        border: 2px solid;
        clip-path: inset(0 round 4px);
        border-image: linear-gradient(0deg, #9EF2FF, #EF00FE) 10 10;
      }

      .speedProgress {
        .pxToVW(700);
        .pxToVW(142, height);
        margin: @auto;
        .pxToVW(12, margin-top);
        .pxToVW(10, border-radius);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .top_cf {
          display: flex;
          .pxToVW(642);
          margin: @auto;
          justify-content: space-between;

          span:nth-of-type(1) {
            .pxToVW(34, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
          }

          span:nth-of-type(2) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
          }
        }

        .Progress {
          .pxToVW(642);
          .pxToVW(20, height);
          background: rgba(0, 0, 0, 0.4);
          margin: @auto;
          .pxToVW(10, border-radius);
          .pxToVW(30, margin-top);
          position: relative;

          >div {
            height: 100%;
            background: #F6CC03;
            border-radius: 5px 0px 0px 5px;
            position: absolute;
          }

          img {
            .pxToVW(68);
            .pxToVW(68, height);
            position: absolute;
            top: -110%;
          }
        }
      }

      .ba_active1 {
        .pxToVW(698);
        .pxToVW(224, height);
        margin: @auto;
        .pxToVW(31, margin-top);
        background: url('https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_chang_bg.png') no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .top_changshu {
          .pxToVW(150);
          .pxToVW(42, height);
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            position: absolute;
            width: 100%;
          }

          span {
            .pxToVW(24, font-size);
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFEFE;
            z-index: 10;
          }
        }

        .center_name {
          width: 94%;
          .pxToVW(118, height);
          margin: @auto;
          display: flex;
          justify-content: space-between;
          align-items: end;

          .pic_avac {
            display: flex;
            align-items: end;

            .zuoji_header {
              .pxToVW(100);
              .pxToVW(100, height);
              display: flex;
              justify-content: center;
              border-radius: 50%;

              img {
                border-radius: 50%;
                width: 100%;
              }
            }

            .name_list {
              display: flex;
              flex-direction: column;
              justify-content: center;

              span {
                .pxToVW(32, font-size);
                .pxToVW(4, padding-top);
                .pxToVW(26, margin-left);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFEFE;
              }

              .pic_header_img {
                display: flex;
                .pxToVW(26, margin-left);
                // .pxToVW(6, margin-top);
                align-items: center;

                img:nth-of-type(1) {
                  .pxToVW(32);
                  .pxToVW(32, height);
                }

                img:nth-of-type(2) {
                  .pxToVW(65);
                  .pxToVW(14, margin-left);
                }
              }
            }
          }

          .icon_cin {
            .pxToVW(130);
            .pxToVW(130, height);
            margin-top: -6px;

            img {
              width: 100%;
            }
          }
        }

        .bottom_cfzhi {
          width: 100%;
          .pxToVW(66, height);
          display: flex;
          align-items: center;
          justify-content: center;
          background: #C27C22;
          border-radius: 0 0 4px 4px;

          span:nth-of-type(1) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFEFE;
          }

          span:nth-of-type(2) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFF603;
          }
        }

      }

      .ba_active2 {
        .pxToVW(698);
        .pxToVW(224, height);
        margin: @auto;
        .pxToVW(31, margin-top);
        background: url('https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_chang_bg.png') no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;


        .top_changshu {
          .pxToVW(150);
          .pxToVW(42, height);
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            position: absolute;
            width: 100%;
          }

          span {
            .pxToVW(24, font-size);
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFEFE;
            z-index: 10;
          }
        }

        .center_name {
          width: 94%;
          .pxToVW(118, height);
          margin: @auto;
          display: flex;
          justify-content: space-between;
          align-items: end;

          .pic_avac {
            display: flex;
            align-items: end;

            .zuoji_header {
              .pxToVW(100);
              .pxToVW(100, height);
              border-radius: 50%;
              display: flex;
              align-items: center;

              img {
                border-radius: 50%;
                width: 100%;
              }
            }

            .name_list {
              display: flex;
              flex-direction: column;
              justify-content: end;

              span {
                .pxToVW(32, font-size);
                .pxToVW(26, margin-left);
                .pxToVW(4, padding-top);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFEFE;
              }

              .pic_header_img {
                display: flex;
                .pxToVW(26, margin-left);
                // .pxToVW(6, margin-top);
                align-items: center;

                img:nth-of-type(1) {
                  .pxToVW(32);
                  .pxToVW(32, height);
                }

                img:nth-of-type(2) {
                  .pxToVW(60);
                  .pxToVW(14, margin-left);
                }
              }
            }
          }

          .icon_cin {
            .pxToVW(130);
            .pxToVW(130, height);
            margin-top: -6px;

            img {
              width: 100%;
            }
          }
        }

        .bottom_cfzhi {
          width: 100%;
          .pxToVW(66, height);
          display: flex;
          align-items: center;
          justify-content: center;
          background: #620E92;
          border-radius: 0 0 4px 4px;


          span:nth-of-type(1) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFEFE;
          }

          span:nth-of-type(2) {
            .pxToVW(28, font-size);
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFF603;
          }
        }

      }

      .nopress {
        .pxToVW(30, font-size);
        height: 50vh;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFEFE;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 20vw;
      }

      .ba_active1:last-child {
        .pxToVW(40, margin-bottom);
      }

      .ba_active2:last-child {
        .pxToVW(40, margin-bottom);
      }
    }

    .rank_pangming {
      width: 92%;
      .pxToVW(160, height);
      margin: @auto;
      display: flex;
      align-items: center;
      position: relative;

      .rank_name {
        .pxToVW(54);
        .pxToVW(54, height);
        .pxToVW(30, margin-right);
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          .pxToVW(54);
        }

        span {
          // .pxToVW(30, margin-right);
          .pxToVW(40, font-size);
          font-family: PingFang SC;
          font-weight: bold;
          color: #FFFEFE;
        }
      }

      .header_img {
        .pxToVW(100);
        .pxToVW(100, height);
        background: #FFF609;
        border: 1px solid #FFFFFF;
        border-radius: 50%;

        img {
          width: 100%;
          border-radius: 50%;
        }
      }

      .border_back2 {
        border: 1px solid #00F4FD;
      }

      .border_back3 {
        border: 1px solid #FE81C4;
      }

      .user_miaoshu {
        display: flex;
        flex-direction: column;
        .pxToVW(26, margin-left);


        span {
          .pxToVW(32, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }

        >div {
          display: flex;
          align-items: center;
          .pxToVW(10, margin-top);

          img:nth-of-type(1) {
            .pxToVW(32);
            .pxToVW(32, height);
          }

          img:nth-of-type(2) {
            .pxToVW(70);
            .pxToVW(14, margin-left);
          }
        }
      }

      .pang_rangk {
        position: absolute;
        right: 0%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        .pxToVW(200);

        span {
          .pxToVW(32, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }

        >div {
          .pxToVW(95);
          .pxToVW(50, height);
          .pxToVW(20, margin-top);
          background: #FD5882;
          .pxToVW(25, border-radius);
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            .pxToVW(38);
            .pxToVW(26, height);
          }
        }

      }
    }

    .rank_pangming:last-child {
      .pxToVW(160, margin-bottom);
    }
  }

  .top_one {
    background: url("https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_bg.png") no-repeat;
    background-size: cover;
  }

  .top_two {
    background: url("https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_bg.png") no-repeat;
    background-size: cover;
  }

  .shine_icon {
    position: absolute;
    top: 6vw;
    .pxToVW(824);
    .pxToVW(238.4, height);
    display: flex;
    justify-content: center;
    z-index: 11;

    img {
      .pxToVW(690);
      .pxToVW(238.4, height);
      margin-left: 4vw;
    }
  }

  .stage_icon {
    display: flex;
    justify-content: center;
    .pxToVW(828);
    .pxToVW(716.6, height);
    flex-direction: column;
    align-items: center;
    margin-top: -12vw;
    position: relative;

    .back_stage {
      position: absolute;
      width: 100%;
    }

    .back_icon {
      position: absolute;
      top: 12vw;
      left: 0%;
      .pxToVW(92);
      .pxToVW(62, height);
      z-index: 13;
    }

    .SayHello {
      position: absolute;
      top: 10vw;
      .pxToVW(18, right);
      .pxToVW(60);
      z-index: 13;
    }

    .header_pic {
      .pxToVW(350);
      .pxToVW(350, height);
      .pxToVW(64, margin-top);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .portrait_kuang {
        // .pxToVW(350);
        width: 100%;
        position: absolute;
        z-index: 1;
      }

      .headPic_ {
        position: absolute;
        .pxToVW(258);
        .pxToVW(242, height);
        .pxToVW(30, bottom);
        border-radius: 50%;
      }

      .headPic_2 {
        .pxToVW(232);
        .pxToVW(232, height);
        position: absolute;
        .pxToVW(40, bottom);
        background: #5C2810;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          .pxToVW(88);
        }
      }

      .follow_icon {
        position: absolute;
        right: -18vw;
        bottom: 10vw;
        .pxToVW(125);
        .pxToVW(62, height);
        .pxToVW(62, border-radius);
        background: #FD5882;
        display: flex;
        justify-content: center;
        align-items: center;

        .pxToVW(34, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
      }
    }

    .EnterRoom {
      .pxToVW(222);
      .pxToVW(58, height);
      .pxToVW(30, border-radius);
      background: linear-gradient(270deg, #FD5882 1%, #FF9DF1 100%);
      z-index: 1;
      position: absolute;
      bottom: 9vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .pxToVW(30, font-size);
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #FFFFFF;

      >span {
        margin-left: 2px;
      }

      img {
        .pxToVW(38);
        .pxToVW(26, height);
      }
    }

    .user_list {
      width: 100vw;
      .pxToVW(70, height);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0vw;
      .pxToVW(36, font-size);
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #FFFFFF;

      .sex_iocn {
        .pxToVW(32, height);
        margin: 0 4px;
      }

      .dengji_iocn {
        .pxToVW(80);
      }
    }
  }

  .tab_cur {
    .pxToVW(828);
    .pxToVW(110, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_title_frame.png") no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    >div {
      .pxToVW(314);
      .pxToVW(80, height);
      .pxToVW(40, margin-left);
      .pxToVW(40, margin-right);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        width: 100%;
      }

      span {
        position: absolute;
        z-index: 1;
        .pxToVW(40, font-size);
        font-family: Adobe Heiti Std;
        font-weight: bold;
        color: rgba(254, 254, 254, 0.7);
      }

      .span_tab {
        .pxToVW(46, font-size);
        font-family: Adobe Heiti Std;
        font-weight: bold;
        color: #692E07;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 1;
      }

    }
  }

  .countDown {
    .pxToVW(720);
    .pxToVW(165, height);
    position: absolute;
    bottom: -2px;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    .left_FieldNumber {
      position: absolute;
      left: 0%;
      .pxToVW(230);
      .pxToVW(102, height);
      display: flex;
      align-items: center;
      justify-content: center;



      img {
        position: absolute;
        width: 100%;
      }

      span {
        z-index: 10;
        .pxToVW(36, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: rgba(246, 204, 3, 0.45);
      }
    }

    .right_FieldNumber {
      position: absolute;
      right: 0%;
      .pxToVW(230);
      .pxToVW(102, height);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        width: 100%;
      }

      span {
        z-index: 10;
        .pxToVW(36, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: rgba(246, 204, 3, 0.45);
      }
    }

    .center_iocn_time {
      .pxToVW(388);
      .pxToVW(166, height);
      z-index: 10;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        width: 100%;
      }

      >span:nth-of-type(1) {
        margin-top: 10px;
        .pxToVW(24, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        z-index: 10;
      }

      >span:nth-of-type(2) {
        .pxToVW(50, font-size);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFF603;
        z-index: 10;
      }
    }
  }

  .rank_user_pm {
    .pxToVW(828);
    .pxToVW(166, height);
    // background: linear-gradient(0deg, #FF6749 1%, #FA738F 98%);
    border-radius: 10px 10px 0px 0px;
    position: fixed;
    bottom: 0%;

    .center_user {
      width: 90%;
      height: 100%;
      margin: @auto;
      display: flex;
      align-items: center;
      position: relative;

      .heade_pic {
        .pxToVW(118);
        .pxToVW(118, height);
        background: #FFF609;
        border: 1px solid #FFFFFF;
        border-radius: 50%;

        img {
          width: 100%;
          border-radius: 50%;
        }
      }

      .list_userlianx {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        .pxToVW(32, margin-left);

        span:nth-of-type(1) {
          .pxToVW(36, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }

        span:nth-of-type(2) {
          .pxToVW(28, padding-top);
          .pxToVW(32, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }
      }

      .pm_list {
        width: 20vw;
        height: 100%;
        position: absolute;
        right: 0%;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          .pxToVW(32, font-size);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFEFE;
        }
      }
    }
  }

  .start-taste-line {
    width: 5vw;
    display: flex;
    justify-content: space-around;
  }





  .rule_model {
    width: 88vw;
    height: 120vw;
    background: #2A0A44;
    overflow-y: scroll;

    .top_title_rule {
      width: 88%;
      height: 14vw;
      display: flex;
      margin: @auto;
      align-items: center;
      .pxToVW(38, font-size);
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;

    }

    .rule_explain {
      width: 88%;
      margin: @auto;
      display: flex;
      flex-direction: column;
      justify-content: center;

      span {
        .pxToVW(30, font-size);
        .pxToVW(50, line-height);
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }

    .FortuneStar {
      width: 88%;
      height: 10vw;
      margin: @auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .pxToVW(28, margin-bottom);

      img {
        .pxToVW(126);
      }

      span {
        .pxToVW(32, font-size);
        font-family: PingFang SC;
        font-weight: 500;
        color: #FEFEFE;
        .pxToVW(13, padding-left);
        .pxToVW(13, padding-right);
      }
    }

    .wealth_gift {
      width: 96%;
      margin: @auto;
      // overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      >div {
        .pxToVW(200);
        .pxToVW(260, height);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .pxToVW(50, margin-bottom);

        .gift_box {
          .pxToVW(170);
          .pxToVW(170, height);
          background: url('https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli_frame.png') no-repeat;
          background-size: cover;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 68%;
            height: 68%;
          }
        }

        .gift_text {
          display: flex;
          flex-direction: column;
          align-items: center;

          span {
            .pxToVW(24, font-size);
            font-family: PingFang SC;
            font-weight: 500;
            color: #FEFEFE;
          }
        }
      }
    }
  }
</style>